<template>
    <div class="app-container">
        <el-dialog :close-on-click-modal="false" v-model="open" append-to-body width="26%">
            <template #header>
                <div style="cursor: move;">
                    库房单位信息：<span class="mr10" style="color:#FF8C00">{{ row.storageName }}</span>
                    单位性质：<span class="mr10" style="color:#FF8C00">{{
                        dictDataMap['storage_type'][row.storageType] ?
                            dictDataMap['storage_type'][row.storageType].dictLabel : ''
                    }}</span><br/>
                    门诊住院标识：<span class="mr10" style="color:#FF8C00">{{
                        dictDataMap['clinic_or_visit'][row.clinicOrVisit] ?
                            dictDataMap['clinic_or_visit'][row.clinicOrVisit].dictLabel :
                            ''
                    }}</span><br/>
                    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                        <template v-for="item in row.drugGrantTypeArray">
                            <el-tab-pane :label="item.label" :name="item.value"/>
                        </template>
                    </el-tabs>
                    <template v-if="activeName === '1'">
                        <dept-tree ref="deptTreeRef" :default-checked-keys="defaultCheckedKeys" :height="'450px'"
                                   :org-id="row.orgId"
                                   :show-checkbox="true"/>
                    </template>
                    <template v-else-if="activeName === '2'">
                        <dept-tree ref="deptTreeTwoRef" :default-checked-keys="defaultCheckedKeys" :height="'450px'"
                                   :org-id="row.orgId"
                                   :show-checkbox="true"/>
                    </template>
                </div>
            </template>
            <template #footer>
            <span class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {addStorageVsDept, listStorageVsDept} from '@/api/drug/storageVsDept'
import {useDictStoreHook} from "@/store/modules/dict";

const dictStore = useDictStoreHook();
const dictDataMap = ref<any>(dictStore.isTypeGetData('storage_type', 'drug_classification', 'drug_grant_type', 'clinic_or_visit'))
// 是否显示弹出层
const open = ref(false)
const row = ref<any>({})
const buttonLoading = ref(false)
// 已选中的科室树节点
const defaultCheckedKeys = ref([])
const form = ref<any>({})
const deptTreeRef = ref()
const deptTreeTwoRef = ref()
const activeName = ref<String>("1")

// 取消按钮
function cancel() {
    defaultCheckedKeys.value = []
    open.value = false;
    form.value.storageId = ''
    form.value.deptIds = []
}

/** 显示分配科室弹出框 */
function storageVsDeptShow(rowInfo) {
    nextTick(() => {
        open.value = true
        row.value = rowInfo
        row.value.drugGrantTypeArray = []
        // 设置默认选中第一个tag页签
        activeName.value = row.value.drugGrantType[0]
        row.value.drugGrantTypeArray = []
        row.value.drugGrantType.forEach(item => {
            const data = {
                label: dictStore.getMateDictInfo(dictDataMap.value['drug_grant_type'], item).dictLabel,
                value: item
            }
            row.value.drugGrantTypeArray.push(data)
        })
        listStorageVsDeptFun()
        form.value.storageId = rowInfo.id
        form.value.orgId = rowInfo.orgId
    })
}

/** 获取已分配的科室 */
function listStorageVsDeptFun() {
    let param = {
        storageId: row.value.id,
        orgId: row.value.orgId,
        drugGrantType: activeName.value
    }
    listStorageVsDept(param).then((res: any) => {
        if (activeName.value === "1") {
            deptTreeRef.value.clearTheSelection()
        } else {
            deptTreeTwoRef.value.clearTheSelection()
        }
        let deptIds = [] as any
        res.data.forEach((item: any) => {
            deptIds.push(item.deptId)
        })
        nextTick(() => {
            defaultCheckedKeys.value = deptIds
        })

    })
}

function submitForm() {
    form.value.drugGrantType = activeName.value
    if (activeName.value === "1") {
        form.value.deptIds = deptTreeRef.value.getCheckedKeys()
    } else {
        form.value.deptIds = deptTreeTwoRef.value.getCheckedKeys()
    }
    if (form.value.deptIds.length < 1) {
        return ElMessage.error("请勾选科室后保存")
    }
    addStorageVsDept(form.value).then(_res => {
        ElMessage.success("科室分配成功")
        cancel()
    })
}

function handleClick(tab, _event) {
    activeName.value = tab.props.name
    listStorageVsDeptFun()
}

defineExpose({
    storageVsDeptShow
})
</script>

<script lang="ts">
export default {
    name: "storageVsDept"
}
</script>

<style scoped></style>
